import Vue from 'vue'
import Component from 'vue-class-component'
import '@/modules/photos/photoStyle.css'
import {Watch} from 'decorators'
// import VuePullRefresh from 'vue-pull-refresh'

@Component({
  props: {
    datas: Array,
    leftItems: Array, //
    rightItems: Array,
    isLoadMore: Boolean
  }
})

export default class FlowListClass extends Vue {
  isScrollBottom=false
  isTop=false
  pageHeight = 0

  @Watch('isLoadMore', {immediate: true, deep: true})
  onIsLoadMoreChange (isLoadMore) {
    this.isScrollBottom = isLoadMore
  }

  mounted () {
    const object = document.getElementById('flow')
    object.addEventListener('scroll', this.handlerScroll)
    this.pageHeight = object.offsetHeight
  }

  handlerScroll() {
    const leftDivHeight = document.getElementById('leftFlow').offsetHeight
    const rightDivHeight = document.getElementById('rightFlow').offsetHeight
    const scrollHeight = leftDivHeight > rightDivHeight ? leftDivHeight : rightDivHeight
    const object = document.getElementById('flow')
    var scrollTop = object.scrollTop

    var windowHeight = object.offsetHeight // 当前可见区域的大小

    if (scrollTop + windowHeight >= scrollHeight - 100) {
      // this.isScrollBottom = true

      this.$emit('loadMore')
    }
    if (scrollTop + windowHeight === this.pageHeight) {
      this.$emit('refresh')
    }
  }

  handleRefresh() {
    alert('refresh')
    this.$emit('refresh')
  }

  render () {
    return (
      <div id='flow' class='flowClass'>
           <div id='leftFlow' class='leftFlowClass'>
             {this.$slots.leftItemName}
            </div>

            <div id='rightFlow' class='rightFlowClass'>
              {this.$slots.rightItemName}
            </div>
          <p v-show={this.isScrollBottom} class="loading">
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </p>
        </div>
    )
  }
}
